<template>
  <el-container class="login" direction="vertical">
    <el-main class="login-main">
      <login
        v-show="!isRegisterMode"
        :switchToRegister="switchToRegister"
        :validateSpecialChar="validateSpecialChar"
        ref="login"
      />
      <register
        v-show="isRegisterMode"
        :switchToRegister="switchToRegister"
        :validateSpecialChar="validateSpecialChar"
        ref="register"
      />
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Register from '#/register.vue'
import Login from '#/login.vue'
import { FormInstance } from 'element-plus'

const login = ref<{ form: FormInstance } | null>(null)
const register = ref<{ form: FormInstance } | null>(null)

const validateSpecialChar = (rule: any, value: any, callback: any) => {
  if (/[!@#$%^&*]/.test(value)) {
    callback()
  }
  callback(new Error('密码必须包含一个特殊字符'))
}

const isRegisterMode = ref<boolean>(false)
const switchToRegister = () => {
  login.value?.form.resetFields()
  register.value?.form.resetFields()
  isRegisterMode.value = !(isRegisterMode.value)
}
</script>

<style lang="scss" scoped>
$bgcolor: rgb(212, 241, 239);
$main-body-bg: #323542;
$text-color: #fff;

.login {
  height: 100%;
  background: $bgcolor;
  color: $text-color;

  &-main {
    text-align: center;
    display: flex;
    align-items: center;
  }
}
</style>
